<%@include file="/common/CHeader.jsp" %>
<%@page pageEncoding="UTF-8" %>
<body>
<div class="container-fluid">
    <div class="row-fluid">
        <!-- block -->
        <div id="app"  class="block">
            <div class="block-content collapse in">
                <%--------%>
                <div class="span6 pull-right" style="margin: 2px 0px 2px 0px">
                    <button class="btn btn-primary btn-sm pull-right" data-toggle="modal" data-target="#myModal">
                        选择列
                    </button>
                    <button class="btn btn-primary btn-sm pull-right" data-toggle="collapse" data-target="#demo"
                            style="margin-right: 5px">
                        搜索列
                    </button>
                </div>
                    <!--搜索条件，选择搜索字段-->
                        <div class="col-md-12 collapse in" id="demo" style="padding-left: 3px;padding-right: 0px">
                            <%--<ul class="list-inline">--%>
                                <%--<template v-for="(value,key) in singelModel">--%>
                                    <%--<li class=""><div class="checkbox"><label><input type="checkbox"  v-bind:value="key" v-model="searchProperty" class="checkbox">--%>
                                        <%--{{il8message[key]}}</label>--%>
                                    <%--</div>--%>
                                    <%--</li>--%>
                                <%--</template>--%>
                            <%--</ul>--%>
                            <!--展示需要搜索的字段-->
                            <div class="col-md-12" style="padding-right: 0;padding-left: 0;">
                                <div class="" id="example2_filter">
                                    <template v-for="item in searchProperty">
                                        <div class="col-md-3" style="padding-left: 0;padding-right: 5px;margin-bottom: 10px">
                                        <input class="form-control" v-model="singelModel[item]" type="text"  v-bind:placeholder="il8message[item]"></div>
                                    </template>
                                    <button v-on:click="clickpage('search')" class="btn btn-primary btn-sm pull-right"
                                            style="margin-right: 5px;margin-bottom: 5px">搜索</button>
                                </div>
                            </div>
                        </div>
                    <%--------%>
                    <div class="span12">
                        <div class="dataTables_wrapper form-inline" role="grid">
                            <table cellpadding="0" cellspacing="0" border="0"
                                   class="table table-striped table-bordered dataTable" id="example2"
                                   aria-describedby="example2_info">
                                <thead>
                                <tr>
                                    <th></th>
                                    <%--取已选择的要显示的字段--%>
                                    <template v-for="keyname in selectedProperty">
                                        <th>{{il8message[keyname]}}</th>
                                    </template>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="(model,index) in listModel">
                                    <td>{{index+1}}</td>
                                    <template v-for="keyname in selectedProperty">
                                        <td>{{model[keyname]}}</td>
                                    </template>
                                </tr>
                                </tbody>
                            </table>
                            <%--分页--%>
                            <div>
                                <div class="span6 pull-left">
                                    <div class="dataTables_length">
                                        <label>
                                            <select v-model="pageLength" @change="clickpage('select')"
                                                    name="pagelength" class="form-control selectpicker">
                                                <option v-for="option in pageOptions" v-bind:value="option.value">
                                                    {{option.text}}
                                                </option>
                                            </select>
                                        </label>
                                        <span class="label label-primary" style="height: 20px;line-height: 20px">共{{vpages.count}}条运单记录</span>
                                        <span class="label label-primary" style="height: 20px;line-height: 20px">总重量:{{weightTotal}}</span>
                                        <span class="label label-primary" style="height: 20px;line-height: 20px">总体积:{{volTotal}}</span>
                                        <span class="label label-primary" style="height: 20px;line-height: 20px">总件数:{{pcsTotal}}</span>
                                    </div>
                                </div>
                                <div class="span6 pull-right">
                                    <div class="dataTables_paginate paging_bootstrap pagination"
                                         style="margin:0px;display: block">
                                        <ul class="pagination pagination-sm pull-right" style="margin:0px;" >
                                            <li v-show="currentPage != 1" @click="currentPage-- && clickpage('change',currentPage)" ><a href="#">上一页</a></li>
                                            <li v-for="index in pages" @click="clickpage('change',index)" :class="{'active':currentPage == index}" :key="index">
                                                <a href="javascript:void(0);" >{{index}}</a>
                                            </li>
                                            <li v-show="vpages.total != currentPage && vpages.total != 0 " @click="currentPage++ && clickpage('change',currentPage++)"><a href="#" >下一页</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            </div>


            <!-- 模态框（Modal） -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                 aria-hidden="true" style="vertical-align: middle">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title" id="myModalLabel">
                                选择列（Column）选项
                            </h4>
                        </div>
                        <div class="modal-body">
                            <ul class="list-inline">
                                <template v-for="(value,key) in singelModel">

                                    <li class="">
                                        <div class="checkbox"><label><input type="checkbox" v-bind:value="key"
                                                                            v-model="selectedProperty"
                                                                            class="checkbox">{{il8message[key]}}</label>
                                        </div>
                                    </li>

                                </template>
                            </ul>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                            </button>
                            <button type="button" class="btn btn-primary" data-dismiss="modal">
                                选择完毕
                            </button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>



            </div>
        <!-- /block -->
    </div>


</div>

<script>


    var vm = new Vue({
        el: '#app',
//需要注入的模板的父元素
        data: {
            listModel: [],
            singelModel:{},
            vpages: {},
            currentPage: 1,
            pageLength:'10', //默认每页显示几条数据
            showItem:5,     //分页显示几页
            pageOptions:[
                {text:'每页2条',value:'2'},
                {text:'每页4条',value:'4'},
                {text:'每页10条',value:'10'},
                {text:'每页50条',value:'50'},
                {text:'每页100条',value:'100'}
            ],
            //字段中英文对照表
            il8message:il8message.kpi,
            //存储已选择的要显示表格里面的列名
            selectedProperty:["planeno","flightno","domint","expimp","waybillid","sairportid","satime","eatime"],
            //存储已选择的要作为搜索条件的字段名
            searchProperty:["planeno","flightno","domint","expimp","waybilltype","curyear","curmonth","curweek","endyear","endmonth","endweek"],
            weightTotal:0,              //总重量
            volTotal:0,                 //总体积
            pcsTotal:0,                  //总件数
        }, //end data
        created: function () {
            var initPara = {begin: 0, length: this.pageLength};
            $.ajax({
                type: 'POST',
                url: "list.json",
                data: initPara,
//                dataType: 'json',
//                contentType: "application/json",
                success: function (data) {
                    vm.vpages = data.page; //总页码
                    vm.listModel = data.model;//循环内容
                    vm.singelModel = vm.listModel[0];
                    vm.weightTotal = data.totals.weight;
                    vm.volTotal = data.totals.vol;
                    vm.pcsTotal = data.totals.pcs;

                    vm.currentPage = data.page.current;//当前页(添加高亮样式)
                }
            });



        }, //created
        computed:{
            pages:function(){
                var pag = [];
                if( this.currentPage < this.showItem ){ //如果当前的激活的项 小于要显示的条数
                    //总页数和要显示的条数那个大就显示多少条
                    var i = Math.min(this.showItem,this.vpages.total);
                    while(i){
                        pag.unshift(i--);
                    }
                }else{ //当前页数大于等于显示页数了
                    var middle = this.currentPage - Math.floor(this.showItem / 2 ),//从哪里开始
                        i = this.showItem;
                    if( middle >  (this.vpages.total - this.showItem)  ){
                        middle = (this.vpages.total - this.showItem) + 1
                    }
                    while(i--){
                        pag.push( middle++ );//填充页数
                    }
                }
                return pag
            }
        },
        methods: {
            /**
             *
             * @param type 点击绑定的类型，(前一页,后一页，被选择的页数，搜索)
             * @param event 绑定事件
             */
            clickpage: function (type,index) {
                var currentPage,begin,page,lenth;
                currentPage = parseInt(vm.currentPage); //取当前页
                lenth = parseInt(vm.pageLength);        //每页显示多少条

                //搜索，
                switch (type){
                    case "search":
                        currentPage = 0; //搜索归零起始页面
                        break;
                }

                begin = currentPage*lenth;  //计算数据开始位置，

                switch (type){
                    case "change"://选择页面判断
                        currentPage = index;
                        begin = (parseInt(currentPage)-1)*lenth;
                        break;
                    case "select": //更换页面数量
                        begin = vm.vpages.begin; //取当前数据开始值
                        break;
                }

                page = {
                    begin: begin,
                    length: lenth
                };

                var para= page;

                //搜索条件
                vm.searchProperty.forEach(function (val,index) {
                    para[val]= vm.singelModel[val];
                });

                $.ajax({
                    type: 'POST',
                    url: "list.json",
                    data: para,
//                    dataType: 'json',
//                    contentType: "application/json",
                    success: function (data) {
                        vm.listModel = data.model;
                        vm.vpages = data.page;
                        vm.currentPage = data.page.current;
                        vm.weightTotal = data.totals.weight;
                        vm.volTotal = data.totals.vol;
                        vm.pcsTotal = data.totals.pcs;
                    },

                });
            }//end method
        }
    }); //end vue
</script>
</body>
</html>

